@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 32px !important;
    }
}

body {
    padding-bottom: 1.3333rem;
}

header {
    display: flex;
    justify-content: space-between;
    width: 10rem;
    height: 1.28rem;
    background-image: linear-gradient(180deg, #fa4651 0%, #f4804c 100%);

    div:nth-child(2) {
        margin-right: .4533rem;
        width: .5333rem;
        height: .1333rem;
        margin-top: .2667rem;

        // background-color: #ffffff;


    }

    >div:nth-child(1) {
        >img:nth-child(1) {
            margin-left: .4rem;
            width: .2855rem;
            height: .5177rem;
            // border: .0533rem solid;
            border-color: #ffffff;
            margin-top: .1853rem;
        }

        span {
            margin-top: .16rem;
            width: 1.6rem;
            height: .7467rem;
            font-family: PingFang SC;
            font-weight: 600;
            color: #ffffff;
            font-size: .5333rem;
            line-height: .5067rem;
        }

        i {
            margin-left: .2667rem;
            margin-top: .32rem;
            width: 2.08rem;
            height: .5333rem;
            font-family: PingFang SC;
            color: #ffffff;
            font-size: .3733rem;
            line-height: .4533rem;

        }


    }
}

.box {
    width: 10rem;
    max-width: 750px;
    min-width: 320px;




    ul {


        position: relative;
        display: flex;
        width: 9.1733rem;
        height: 2.8267rem;
        margin: auto;
        background-color: #ffffff;
        // background-color: red;
        flex-direction: column;


        li:nth-child(1) {



            >img {
                margin-top: 1.0667rem;
                width: .4267rem;
                height: .4267rem;
            }
        }

        li:nth-child(2) {
            width: 2.8267rem;
            height: 2.1067rem;

            >img {
                margin-top: -1.2267rem;
                margin-left: .8533rem;
                width: 2.8267rem;
                height: 2.1067rem;
                background-color: pink;
            }
        }

        li:nth-child(3) {
            display: flex;
            position: absolute;
            top: .3067rem;
            left: 3.92rem;
            flex-direction: column;
            width: .8rem;

            span {
                white-space: nowrap;
                width: 5.2533rem;
                height: .5333rem;

                font-weight: 600;
                color: #3d444d;
                font-size: .3733rem;
            }

            i {
                margin-top: .1067rem;
                white-space: nowrap;
                width: 4.4267rem;
                height: .4533rem;

                color: #b0b8c2;
                font-size: .32rem;
            }

            strong {
                vertical-align: bottom;
                margin-top: .5733rem;

                white-space: nowrap;
                display: flex;
                vertical-align: middle;

                em:nth-child(1) {
                    width: 1.7333rem;

                    color: #f23a3a;
                    font-size: .3733rem;


                }

                em:nth-child(2) {
                    width: .5333rem;
                    height: .5333rem;
                    margin-left: 1.7067rem;

                    img {

                        width: .5333rem;
                        height: .5333rem;
                        margin-left: .1333rem;
                        line-height: .5333rem;
                        text-align: center;


                    }
                }

                em:nth-child(3) {
                    padding-left: .12rem;
                    padding-top: .08rem;
                    box-sizing: border-box;
                    width: .16rem;
                    height: .2933rem;
                    font-family: SourceHanSansCN-Medium;
                    color: #333333;
                    font-size: .2933rem;
                    line-height: .3733rem;
                    margin-left: .1333rem;
                }

                em:nth-child(4) {
                    img {
                        width: .5333rem;
                        height: .5333rem;
                        margin-left: .2667rem;
                    }
                }
            }

        }
    }
}

// bug
.Order {

    flex-wrap: nowrap;
    width: 10.0267rem;

    height: 1.3333rem;
    background-color: #ffffff;

    box-shadow: 0 .0267rem 0 #e5e5e5 inset;

    ul {


        display: flex;
        margin-left: .4533rem;
        // justify-content: space-between;

        li:nth-child(1) {
            img {
                margin-top: .4267rem;
                width: .48rem;
                height: .48rem;
                background-color: #f2f2f2;
            }
        }

        li:nth-child(2) {
            white-space: nowrap;
            margin-left: .2667rem;
            width: 0.7467rem;
            height: 0.5333rem;
            font-family: PingFang SC;
            color: #202020;
            font-size: .3733rem;
            margin-top: .3889rem;
        }

        li:nth-child(3) {
            margin-left: 1.0721rem;
            width: 2.56rem;
            height: .5333rem;
            white-space: nowrap;
            margin-top: .3889rem;
            font-family: PingFang SC;
            color: #3d444d;
            white-space: nowrap;


            span {
                display: block;
                white-space: nowrap;
                font-size: .3733rem;

                a {
                    margin-top: -0.48rem;
                    display: block;
                    margin-left: .7333rem;
                    color: rgba(255, 74, 104, 1)
                }
            }


        }

        li:nth-child(4) {
            margin-left: .0667rem;
            width: 3.92rem;
            height: 1.0667rem;
            position: relative;
            background-color: #ff6200;
            background-size: cover;
            margin-top: .1333rem;
            border-radius: .6667rem;

            span {
                // width: 1.7067rem;
                // height: .5867rem;
                font-family: PingFang SC;
                font-weight: 600;
                color: #ffffff;
                font-size: .4267rem;
                position: absolute;
                top: .1867rem;
                margin-left: 1.1763rem;
            }
        }
    }
}

//底部home栏
.Home {
    background-color: #ffffff;
    margin: auto;
    width: 10rem;
    height: 1.4133rem;
    left: 50%;
    transform: translateX(-50%);
    //   background-color: red;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around;

    div {
        a {
            margin-top: 0.2857rem;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 0.5336rem;
                height: 0.5127rem;
            }

            //   display: block;
        }

        span {
            width: 0.5333rem;
            height: 0.3733rem;

            color: #848484;
            font-size: 0.2667rem;
        }
    }
}